<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" ref="filters" :size="size">
        <el-form-item prop="ruleNo">
          <el-input v-model="filters.ruleNo" placeholder="规则编号"></el-input>
        </el-form-item>
        <el-form-item prop="ruleName">
          <el-input v-model="filters.ruleName" placeholder="规则名称"></el-input>
        </el-form-item>
        <el-form-item prop="mode">
          <el-select v-model="filters.mode" style="width:200px" placeholder="规则类型">
            <el-option
              v-for="item in modeList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="rtypeId">
          <el-select v-model="filters.rtypeId" style="width:200px" placeholder="规则类别">
            <el-option
              v-for="item in ruleTypeList"
              :key="item.id"
              :label="item.ruleName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="status">
          <el-select v-model="filters.status" style="width:200px" placeholder="状态">
            <el-option
              v-for="item in statusList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-row>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
          </el-form-item>
          <el-form-item>
            <kt-button label="新增积分获取规则" type="primary" @click="handleAdd" />
          </el-form-item>
          <el-form-item>
            <kt-button label="新增积分消耗规则" type="primary" @click="handleReduce" />
          </el-form-item>
          <el-form-item>
            <kt-button label="启用/停用" type="primary" @click="editStatus" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      :operationWidth="300"
      :data="pageResult"
      @selectionChange="selectionChange"
      :columns="filterColumns"
      :showBatchDelete="false"
      :showDeleteParams="true"
      :showDeleteOperation="false"
      :showDetailOperation="true"
      @findPage="findPage"
      @handleDetail ="handleDetail"
      @handleDeleteParams="handleDeleteParams"
      @handleEdit="handleEdit"
      ref="CyTable"
    ></cy-table>

    <!--新增积分获取规则-->
    <el-dialog title="新增积分获取规则" width="70%" :visible.sync="ruleObtainVisible" :close-on-click-modal="false">
      <el-tabs v-model="activeName">
        <el-tab-pane label="选择规则类型" name="first" :disabled="true">
          <el-form ref="ruleObtainForm" :rules="ruleObtainFormRules" label-width="80px" :model="ruleObtainForm">
            <el-form-item label="规则类型:">
              <el-select v-model="ruleObtainForm.rtypeId" @change="selectModel($event)" style="width:200px" placeholder="规则类别">
                <el-option
                  v-for="item in ruleTypeAddList"
                  :key="item.id"
                  :label="item.ruleName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="规则名称">
              <el-input v-model="ruleObtainForm.ruleName" style="width:200px"></el-input>
            </el-form-item>
            <div style="text-align:center">
              <el-button
                :size="size"
                @click.native="ruleObtainVisible = false"
              >{{ $t("action.cancel") }}</el-button>
              <el-button :size="size" type="primary" @click="nextStepRuleObtain(1)" :loading="editLoading">下一步</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="设置规则" :disabled="true" name="second">
          <el-form ref="ruleObtainForm" :rules="ruleObtainFormRules" label-width="80px" :model="ruleObtainForm">
            <el-form-item label="" label-width="200px" v-if="ruleObtainShow">
              <el-input placeholder="请输入内容" v-model="ruleObtainForm.ruleScore">
                <template slot="prepend">{{ruleObtainShowRemark}}：</template>
                <template slot="append">积分</template>
              </el-input>
            </el-form-item>
            <el-form-item label="渠道:" v-if="!ruleObtainShow">
              <el-select v-model="ruleObtainForm.channelId" style="width:200px" placeholder="请选择">
                <el-option
                  v-for="item in channelCodeList"
                  :key="item.id"
                  :label="item.channelName"
                  :value="item.id"
                ></el-option>
              </el-select>
              <span>每消费</span>
              <el-input v-model="ruleObtainForm.ruleFactor" style="width:200px"></el-input> <span>元，赠送</span>
              <el-input v-model="ruleObtainForm.ruleScore" style="width:200px"></el-input> <span>积分</span>
            </el-form-item>
          </el-form>
          <div style="text-align:center;padding-top: 30px;">
            <el-button :size="size" type="primary" @click="upStep(2)" :loading="editLoading">上一步</el-button>
            <el-button :size="size" type="primary" @click="nextStepRuleObtain(2)" :loading="editLoading" v-show="detailShow">下一步</el-button>
            <el-button :size="size" type="primary" @click="returnRuleList" v-show="!detailShow">返回规则列表</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="创建成功" :disabled="true" name="third">
          <div style="height:100px">
            <label
              class="col-sm-7 control-label ng-binding"
              style="font-family: 'Arial Negreta', 'Arial';font-weight: 700;font-style: normal;font-size: 32px;color: #333333;"
            >创建成功</label>
            <img v-bind:src="imgUrl" />
          </div>
          <div style="text-align:center;padding-top:130px;">
            <el-button :size="size" type="primary" @click="returnRuleList">返回规则列表</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!--新增积分消耗规则-->
    <el-dialog title="新增积分消耗规则" width="70%" :visible.sync="ruleConsumeVisible" :close-on-click-modal="false">
      <el-tabs v-model="activeName">
        <el-tab-pane label="选择规则类型" name="first" :disabled="false">
          <el-form ref="ruleConsumeForm" :rules="ruleConsumeFormRules" label-width="80px" :model="ruleConsumeForm">
            <el-form-item label="规则类型:">
              <el-select v-model="ruleConsumeForm.rtypeId" style="width:200px" placeholder="规则类别">
                <el-option
                  v-for="item in ruleTypeConsumeList"
                  :key="item.id"
                  :label="item.ruleName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="规则名称">
              <el-input v-model="ruleConsumeForm.ruleName" style="width:200px"></el-input>
            </el-form-item>
            <div style="text-align:center">
              <el-button
                :size="size"
                @click.native="ruleConsumeVisible = false"
              >{{ $t("action.cancel") }}</el-button>
              <el-button :size="size" type="primary" @click="nextStep(1)" :loading="editLoading">下一步</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="设置规则" :disabled="true" name="second">
          <el-form :model="ruleConsumeForm" :inline="true" ref="ruleConsumeForm" :size="size">
            <el-form-item label="默认规则："></el-form-item>
            <el-form-item label="申请金额:" prop="ruleFactor">
              <div>
                <el-input placeholder="请输入申请金额" v-model="ruleConsumeForm.ruleFactor">
                  <template slot="prepend">1元=</template>
                  <template slot="append">积分</template>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item label="订单消耗上限积分:" prop="orderConsume">
              <el-input placeholder="请输入订单消耗上限积分" v-model="ruleConsumeForm.orderConsume"></el-input>
            </el-form-item>
            <el-form-item prop="pointType">
              <el-select v-model="ruleConsumeForm.pointType">
                <el-option
                  v-for="item in pointTypeList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
            <div>
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
              </el-checkbox-group>
          </div>
          </el-form>
          <div style="text-align:center;padding-top: 30px;">
            <el-button :size="size" type="primary" @click="upStep(2)" :loading="editLoading">上一步</el-button>
            <el-button :size="size" type="primary" @click="nextStep(2)" :loading="editLoading" v-show="detailShow">下一步</el-button>
            <el-button :size="size" type="primary" @click="returnRuleList" v-show="!detailShow">返回规则列表</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="创建成功" :disabled="true" name="third">
          <div style="height:100px">
            <label
              class="col-sm-7 control-label ng-binding"
              style="font-family: 'Arial Negreta', 'Arial';font-weight: 700;font-style: normal;font-size: 32px;color: #333333;"
            >创建成功</label>
            <img v-bind:src="imgUrl" />
          </div>
          <div style="text-align:center;padding-top:130px;">
            <el-button :size="size" type="primary" @click="returnRuleList">返回规则列表</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import utils from "@/assets/js/utils.js";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      imgUrl: "/static/u16.png",
      tableDataProductRule: [],

      tableData: [],
      ruleObtainForm: {
        rtypeId: "",
        mode:1,
        rtype_id:"",
        ruleFactor:"",
        orderConsume:"",
        pointType:"",
      },
      ruleConsumeForm: {
        rtypeId: "",
        mode:2,
        rtype_id:"",
        ruleFactor:"",
        orderConsume:"",
        pointType:"",
      },
      ruleFilters: {
        zhuce_user: "",
        vip_user: "",
        rule_status: ""
      },
      detailShow:true,
      ruleObtainShow:true,
      ruleObtainShowRemark:'',
      ruleObtainFormRules: {ruleName: [{ required: true, message: "请输入规则名称", trigger: "blur" }]},
      ruleConsumeFormRules: {ruleName: [{ required: true, message: "请输入规则名称", trigger: "blur" }]},
      rule_status: [{ key: "0", value: "百分比" }, { key: "1", value: "分值" }],
      pointTypeList: [{ key: "1", value: "分值" }, { key: "2", value: "百分比" }],
      labelPosition: false,
      ruleObtainVisible: false,
      ruleConsumeVisible: false,
      activeName: "first",
      activeRuleName: "product_type",
      size: "small",
      statusList: [{ key: "", value: "全部" }, { key: "1", value: "启用" }, { key: "2", value: "停用" }],
      ruleTypeList:[],
      ruleTypeAddList: [],
      ruleTypeConsumeList: [],
      channelCodeList: [{ id: "100002", channelName: "BBC" }],
      modeList: [{ key: "", value: "全部" },{ key: "1", value: "积分获取" },{ key: "2", value: "积分消耗" }],
      filters: {
        ruleNo: "",
        ruleName: "",
        mode: "",
        rtypeId: "",
        status: ""
      },
      columns: [
        { prop: "ruleNo", label: "规则编号", minWidth: 120 },
        { prop: "ruleName", label: "规则名称", minWidth: 120 },
        { prop: "mode", label: "规则类型", minWidth: 100 , formatter: this.modeType},
        { prop: "ruleTypeName", label: "规则类别", minWidth: 100 },
        { prop: "statusVal", label: "状态", minWidth: 50 },
        { prop: "createTime", label: "创建时间", minWidth: 120 }
      ],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      // 新增编辑界面数据
      dataForm: {
        shop_id: ""
      },
      selections: [],
      selectionsType: [],
      selectionsProduct: [],
      selectionsProductRule: [],
      checkAll: false,
      cityOptions: ['BBC', '第三方电商', 'O2O'],
      checkedCities: ['BBC', '第三方电商'],
      cities: [],
      isIndeterminate: true
    };
  },

  methods: {
    // 获取分页数据
    findPage: function (data) {
      let this_ = this;
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = this.pageRequest.pageNum;
      this_.filters.limit = this.pageRequest.pageSize;
      this.utils.request.queryRuleList(this_.filters, function (res) {
        if (res.data.rows == null) {
          res.data.rows = [];
        }
        this_.$refs.CyTable.findPage({content:res.data.rows,total:res.data.total});
      });
    },
    modeType: function(row, column){
      if (row.mode != null && row.mode != "") {
        if(row.mode==1){
          return '积分获取';
        }else if(row.mode==2){
          return '积分消耗';
        }
      }
    },
    // 规则类别初始化
    queryRuleTypeList() {
      var that = this;
      this.utils.request.queryRuleTypeList({}, function(res) {
        if(res.data!=null&&res.data!=''){
          var typeListAdd = [];
          var typeListConsume = [];
          for(var i=0;i<res.data.rows.length;i++){
            if(res.data.rows[i].type==1){
              typeListAdd.push(res.data.rows[i]);
            }else if(res.data.rows[i].type==2){
              typeListConsume.push(res.data.rows[i]);
            }
          }
          that.ruleTypeAddList = typeListAdd;
          that.ruleTypeConsumeList = typeListConsume;
          that.ruleTypeList = res.data.rows;
        }
      });
    },
    selectModel(id){
        let obj = {};
        let selectModel = {};
        obj = this.ruleTypeAddList.find((item)=>{//model就是上面的数据源
          if(item.id === id){
            this.selectModel.id = id;
            this.selectModel.ruleName = item.ruleName;
            this.ruleObtainShowRemark = item.remark;
            if(item.id == 1){
              this.ruleObtainShow = true;
            }else{
              this.ruleObtainShow = false;
            }
          }
        });
    },
    channelList(){
      this.cities = this.cityOptions;
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    returnRuleList: function() {
      this.ruleObtainVisible = false;
      this.ruleConsumeVisible = false;
    },
    //启用
    editStatus: function() {
      if (this.selections.length == 0) {
        this.$message({ message: "请选择要操作的数据", type: "error" });
        return;
      } 
      if (this.selections.length > 1) {
        this.$message({ message: "请选择单条数据", type: "error" });
        return;
      } 
      console.log(this.selections);
      var this_ = this;
      this.utils.request.updateRuleInfoStatus(this.selections[0], function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.findPage(null);
        } else {
          this_.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    // 积分新增规则
    handleAdd: function() {
      this.ruleObtainVisible = true;
      this.detailShow =true;
      this.activeName = "first";
      this.tableData = [];
      this.tableDataProductRule = [];
      this.activeRuleName = "product_type";
    },
    // 积分减少规则
    handleReduce: function() {
      this.ruleConsumeVisible = true;
      this.activeName = "first";
      this.tableData = [];
      this.tableDataProductRule = [];
      this.activeRuleName = "product_type";
    },
    // 显示编辑界面
    handleEdit: function(params) {
      this.detailShow =true;
      console.log(params);
      let obj = {};
      let selectModel = {};
      obj = this.ruleTypeAddList.find((item)=>{//model就是上面的数据源

      console.log(item.id,params.row.id)
        if(item.id === params.row.rtypeId){
          this.selectModel.id = params.row.rtypeId;
          this.selectModel.ruleName = item.ruleName;
          this.ruleObtainShowRemark = item.remark;
          if(item.id == 1){
            this.ruleObtainShow = true;
          }else{
            this.ruleObtainShow = false;
          }
        }
      });
      let parameter = {};
      parameter.id = params.row.id;
      parameter.mode = params.row.mode;
      this.activeName = "first";
      if(params.row.mode===1){
        let this_ = this;
        this.$nextTick(function() {
          this.utils.request.getRuleInfoByMode(parameter, function (res) {
            this_.ruleObtainForm = Object.assign({}, res.data);
            this_.ruleObtainVisible = true;
          });
        });
      }else if(params.row.mode===2){
        let this_ = this;
        this.$nextTick(function() {
          this.utils.request.getRuleInfoByMode(parameter, function (res) {
            this_.ruleConsumeForm = Object.assign({}, res.data);
            this_.ruleConsumeVisible = true;
          });
        });
      }
    },
    // 批量删除
    handleDeleteParams: function(data) {
        console.log(data);
      if (data != null && data.params != null) {
        var params = {};
        params.id = data.params.id;
        params.mode = data.params.mode;
        var this_ = this;
        this.utils.request.deleteRuleInfo(params, function(res) {
          if (res.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.findPage(null);
          } else {
            this_.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
        });
      }
    },
    handleDetail: function(params) {
      this.detailShow =false;
      console.log(params);
      let obj = {};
      let selectModel = {};
      obj = this.ruleTypeAddList.find((item)=>{//model就是上面的数据源
        console.log(item.id,params.row.id)
        if(item.id === params.row.rtypeId){
          this.selectModel.id = params.row.rtypeId;
          this.selectModel.ruleName = item.ruleName;
          this.ruleObtainShowRemark = item.remark;
          if(item.id == 1){
            this.ruleObtainShow = true;
          }else{
            this.ruleObtainShow = false;
          }
        }
      });
      let parameter = {};
      parameter.id = params.row.id;
      parameter.mode = params.row.mode;
      this.activeName = "first";
      if(params.row.mode===1){
        let this_ = this;
        this.$nextTick(function() {
          this.utils.request.getRuleInfoByMode(parameter, function (res) {
            this_.ruleObtainForm = Object.assign({}, res.data);
            this_.ruleObtainVisible = true;
          });
        });
      }else if(params.row.mode===2){
        let this_ = this;
        this.$nextTick(function() {
          this.utils.request.getRuleInfoByMode(parameter, function (res) {
            this_.ruleConsumeForm = Object.assign({}, res.data);
            this_.ruleConsumeVisible = true;
          });
        });
      }
    },
    selectionChange(val) {
      this.selections = val.selections;
    },
    selectionChangeType(val) {
      this.selectionsType.push(val);
    },
    //积分获取下一步
    nextStepRuleObtain(data) {
      if (data == 1) {
        if(''==this.ruleObtainForm.ruleName||null==this.ruleObtainForm.ruleName){
            this.$message({
                message: '规则名称不能为空',
                type: 'error',
                center:true,
                offset:250,
                duration:1000
            });
            return false;
        }
        this.activeName = "second";
      } else if (data == 2) {
        var numReg = /^[0-9]+$/
        var numRe = new RegExp(numReg)
        if(this.ruleObtainForm.rtypeId==1){
          if(''==this.ruleObtainForm.ruleScore||null==this.ruleObtainForm.ruleScore){
              this.$message({
                  message: '分值不能为空',
                  type: 'error',
                  center:true,
                  offset:250,
                  duration:1000
              });
              return false;
          }
          if (!numRe.test(this.ruleObtainForm.ruleScore)) {
            this.$message({
              type: 'warning',
              message: '分值为整数',
              duration: 10000,
              showClose: true,
            })
            return false
          }
        }else{
          if(''==this.ruleObtainForm.channelId||null==this.ruleObtainForm.channelId){
              this.$message({
                  message: '请选择渠道',
                  type: 'error',
                  center:true,
                  offset:250,
                  duration:1000
              });
              return false;
          }
          if(''==this.ruleObtainForm.ruleFactor||null==this.ruleObtainForm.ruleFactor){
              this.$message({
                  message: '消费金额不能为空',
                  type: 'error',
                  center:true,
                  offset:250,
                  duration:1000
              });
              return false;
          }
          if (!numRe.test(this.ruleObtainForm.ruleFactor)) {
            this.$message({
              type: 'warning',
              message: '消费金额为整数',
              duration: 10000,
              showClose: true,
            })
            return false
          }
          if(''==this.ruleObtainForm.ruleScore||null==this.ruleObtainForm.ruleScore){
              this.$message({
                  message: '积分获取分值不能为空',
                  type: 'error',
                  center:true,
                  offset:250,
                  duration:1000
              });
              return false;
          }
          if (!numRe.test(this.ruleObtainForm.ruleScore)) {
            this.$message({
              type: 'warning',
              message: '积分获取分值为整数',
              duration: 10000,
              showClose: true,
            })
            return false
          }
        }
        var this_ = this;
        this.utils.request.editRuleInfo(this.ruleObtainForm, function(res) {
          if (res.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.$refs["ruleObtainForm"].resetFields();
            this_.findPage(null);
          } else {
            this_.$message({
              message: "操作失败, " + res.message,
              type: "error"
            });
          }
        });
        this.activeName = "third";
      }
    },
    //积分消耗下一步
    nextStep(data) {
      if (data == 1) {
        if(''==this.ruleConsumeForm.ruleName||null==this.ruleConsumeForm.ruleName){
            this.$message({
                message: '规则名称不能为空',
                type: 'error',
                center:true,
                offset:250,
                duration:1000
            });
            return false;
        }
        this.activeName = "second";
      } else if (data == 2) {
        var numReg = /^[0-9]+$/
        var numRe = new RegExp(numReg)
        if(''==this.ruleConsumeForm.ruleFactor||null==this.ruleConsumeForm.ruleFactor){
            this.$message({
                message: '抵扣价值(1元=X积分)不能为空',
                type: 'error',
                center:true,
                offset:250,
                duration:1000
            });
            return false;
        }
        if (!numRe.test(this.ruleConsumeForm.ruleFactor)) {
          this.$message({
            type: 'warning',
            message: '抵扣价值(1元=X积分)为整数',
            duration: 10000,
            showClose: true,
          })
          return false
        }
        if(''==this.ruleConsumeForm.orderConsume||null==this.ruleConsumeForm.orderConsume){
            this.$message({
                message: '订单抵扣上限不能为空',
                type: 'error',
                center:true,
                offset:250,
                duration:1000
            });
            return false;
        }
        var this_ = this;
        this.utils.request.editRuleInfo(this.ruleConsumeForm, function(res) {
          if (res.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.$refs["ruleConsumeForm"].resetFields();
            this_.findPage(null);
          } else {
            this_.$message({
              message: "操作失败, " + res.message,
              type: "error"
            });
          }
        });
        this.activeName = "third";
      }
    },
    //上一步
    upStep(data) {
      if (data == 2) {
        this.activeName = "first";
      } else if (data == 3) {
        this.activeName = "second";
      }
    },
    // 新增修改回调
    editInfoBack: function(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
        this.dialogVisible = false;
        this.$refs["dataForm"].resetFields();
      } else {
        this.$message({ message: "操作失败, " + data.msg, type: "error" });
      }
      this.findPage();
      this.dialogVisible = false;
      this.operation = false;
      this.editLoading = false;
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      var temp = [];

      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.findPage();
    },
  },
  mounted() {
    this.queryRuleTypeList();
    this.initColumns();
    this.channelList();
  }
};
</script>

<style scoped>
/deep/ .el-input__inner   {
  width: 200px !important;
}
</style>